<template>
  <el-menu
    :default-active="activeMenu"
    class="sidebar-menu"
    :collapse="isCollapse"
    router
  >
    <el-menu-item index="/">
      <el-icon><HomeFilled /></el-icon>
      <template #title>首页</template>
    </el-menu-item>

    <el-menu-item index="/activities">
      <el-icon><Calendar /></el-icon>
      <template #title>活动管理</template>
    </el-menu-item>

    <el-menu-item index="/articles">
      <el-icon><Document /></el-icon>
      <template #title>文章管理</template>
    </el-menu-item>

    <el-menu-item index="/gifts">
      <el-icon><Present /></el-icon>
      <template #title>礼品管理</template>
    </el-menu-item>

    <el-menu-item index="/activity-types">
      <el-icon><Collection /></el-icon>
      <template #title>活动类型</template>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import {
  HomeFilled,
  Calendar,
  Document,
  Present,
  Collection
} from '@element-plus/icons-vue'

const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  }
})

const route = useRoute()
const activeMenu = computed(() => route.path)
</script>

<style scoped>
.sidebar-menu {
  height: 100%;
  border-right: none;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 200px;
}
</style> 